<template>
	<div class="summaryBox">
	    <div class="authority">
	        <div class="commentTilte">
					精彩评论
				<span class="commentLine"></span>
			</div>
			<div class="authorityInfo" v-for='(item,index) in authorityInfo' :key='index'>
				<img :src="item.imgUrl" alt="" />
	        	<div class="authorityName">{{item.authorityName}}</div>
	        	<div class="attention" @click="Attention">
	        		<img v-if="!isAuthorityAttention" src="../../../../assets/images/movieClips/16/1-1.png" alt="" />
	        		<img v-else src="../../../../assets/images/movieClips/16/2-1.png" alt="" />
	        		<div>加关注</div>
	        	</div>
			</div>
	    </div>
	    <div class="authority mainActor">
	    	<div class="commentTilte mainActorTitle">
					主要演员
				<span class="commentLine"></span>
			</div>
			<div class="authorityInfo" v-for="(item,index) in mainActorInfo" :key="index">
				<img :src="item.imgUrl" alt="" />
	        	<div class="authorityName">{{item.actorNmae}}</div>
	        	<div class="attention" @click="newAttention($event,index)">
	        		<img v-if='isActorAttention&&index==nowId' src="../../../../assets/images/movieClips/16/2-1.png" alt="" />
	        		<img v-else src="../../../../assets/images/movieClips/16/1-1.png" alt="" />
	        		<div>加关注</div>
	        	</div>
			</div>
	    </div>
	    <div class="authority videoIntroduction">
	    	<div class="commentTilte">
					片花简介
				<span class="commentLine"></span>
			</div>
			<div class="filmDesc">{{filmDescInfo}}</div>
	    </div>
	</div>
</template>

<script>
export default{
	name:"summaryBox",
	data(){
		return{
			videoInfo:[],
			isAuthorityAttention:false,
			isActorAttention:false,
			authorityInfo:[],
			mainActorInfo:[],
			filmDescInfo:'',
			nowId:0
		}
	},
	methods:{
		Attention(event){
			this.isAuthorityAttention=!this.isAuthorityAttention;
		},
		newAttention(event,num){
			this.nowId=num;
			this.isActorAttention=true;
//			console.log(this.nowId)
		}
	},
	created(){
		var nowIndex=this.$route.query.id;
//		console.log(this.$route.query.id)
		
		this.$axios.get("http://127.0.0.1:3000/filmList")
		    .then(res=>{
		    	var authorityInfo=[];
		    	var newData=res.data.filmList[nowIndex].videoInfo;
//		    	console.log(newData)
		    	for(var i in newData){
		    		
		    		var authorityInfoObj={
		    			authorityName:newData[0].authorityInfo[0].authorityName,
		    			imgUrl:newData[0].authorityInfo[0].imgUrl
		    		};
		    		
		    		//视频演员信息
		    		var mainActorInfo=newData[1].mainActor;
		    		this.mainActorInfo=mainActorInfo;
		    		
		    		//视频简介信息
		    		var filmDescInfo=newData[2].filmDesc;
		    		this.filmDescInfo=filmDescInfo;
		    	}
		    	
//		    	视频制作机构信息
		    	authorityInfo.push(authorityInfoObj)
		    	this.authorityInfo=authorityInfo
		    	
		    })
		    .catch(error=>{
		    	console.log(error)
		    })
    }
}
</script>

<style scoped lang="less">
@current:100rem;
.summaryBox{
	.authority{
		.filmDesc{
			font-size: 24/@current;
			padding: 10/@current 30/@current ;
		}
		.mainActorTitle{
			margin-top: 20/@current;
		}
		.commentTilte{
			margin-top: 60/@current;
		}
		.commentTilte{
			/*height: 30//@current;*/
			font-size: 26/@current;
			border-left: 3/@current solid #AA5AE9;
			padding-left: 10/@current;
			margin-left: 20/@current;
			.commentLine{
				display: block;
				height: 2/@current;
				width: 400/@current;
				background-color: #E1DCE9;
				position: relative;
				top: -15/@current;
				left: 110/@current;
			}
		}
		.authorityInfo{
			padding: 0 40/@current 0 30/@current;
			position: relative;
			height: 110/@current;
			img{
				width: 80/@current;
				height: 80/@current;
				border-radius: 50%;
			}
			.authorityName{
				font-size: 30/@current;
				color: #313131;
				position: relative;
				left: 110/@current;
				top: -90/@current;
			}
			.attention{
				position: absolute;
				right: 40/@current;
				top: -15/@current;
				img{
					width: 140/@current;
					height: 46/@current;
					border-radius: 0;
				}
				div{
					font-size: 24/@current;
					color: white;
					position: relative;
					top: -66/@current;
					left: 50/@current;
				}
			}
		}
	}
}
</style>